<template>
  <div class="analysis">
    <a-card style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
      <div class="salesCard">
        <a-row>
          <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
            <bar title="图表" :data="tableList" />
          </a-col>
          <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
            <ranking-list title="工作量" :list="rankList"/>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
import Bar from "@/components/chart/Bar";
import RankingList from "@/components/chart/RankingList";
import {totalTaskWorkloadVO} from "@/services/task";
import {totalUser} from "@/services/user";

export default {
  components: { Bar, RankingList },
  data() {
    return {
      rankList: [],
      tableList: [],
      workloads: [],
      teachers: [],
    };
  },

  methods: {
    initData() {
      totalTaskWorkloadVO().then(res => {
        const result = res.data
        if (result.code == 200) {
          this.workloads = result.data
        } else {
          this.$message.error(result.message)
        }
        this.workloads.forEach((item) => {
          this.rankList.push({
            name: this.teacherStr(item.teacherId),
            total: item.workload
          });
          this.tableList.push({
            x: this.teacherStr(item.teacherId),
            y: item.workload
          });
        });
      })
    },
    listTotalTeacher() {
      totalUser().then(res => {
        const result = res.data
        if (result.code == 200) {
          this.teachers = result.data
        } else {
          this.$message.error(result.message)
        }
      })
    },
    teacherStr(id) {
      const teacher = this.teachers.find(item => item.id === id);
      return teacher.username
    },

  },
  created() {
    this.listTotalTeacher()
    this.initData()
  }
};
</script>
<style scoped>

</style>
